<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18.5.5-ClientOnly 组件</title>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        /**
         * <ClientOnly> 的组件，该组件可以让模板的一部分内容仅在客户端渲染
         * -- 在服务端渲染时就会忽略该组件，且该组件仅会在客户端被渲染
         * 
        */

        /**
         * <ClientOnly> 组件的实现
         * - 其原理是利用了 onMounted 钩子只会在客户端执行的特性
        */
        import { ref, onMounted, defineComponent } from 'vue'

        export const ClientOnly = defineComponent({
            setup(_, { slots }) {
                // 标记变量，仅在客户端渲染时为 true
                const show = ref(false)
                // onMounted 钩子只会在客户端执行
                onMounted(() => {
                    show.value = true
                })
                // 在服务端什么都不渲染，在客户端才会渲染 <ClientOnly> 组件的插槽内容
                return () => (show.value && slots.default ? slots.default() : null)
            }
        })

    </script>
</html>